﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>九块九优惠购</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.3.0/style/weui.min.css" rel="stylesheet">
    <link href="~/Content/css/weuix.css" rel="stylesheet" />
    <style>
        .demo {
            border-radius: 6px;
            overflow: hidden;
            font-size: 0.8rem;
        }

        .demo-image {
            display: inline-block;
            width: 100%;
            max-width: 100%;
            max-height: 260px;
            margin-bottom: .1em;
        }

        .weui-btn {
            margin-left: 2px;
        }
    </style>


</head>

<body ontouchstart>
    <div class="container">

        <div class="weui-search-bar" style="position: fixed; right: 0; top: 0;width:100%;z-index:10086;">
            <input type="search" class="search-input" id='search' placeholder='老板，买点便宜货' />
            <button class="weui-btn weui-btn_mini weui-btn_primary btn-search">
                <i class="icon icon-4"></i>
            </button>
            <button class="weui-btn weui-btn_mini weui-btn_primary btn-more open-popup" data-target="#half">
                <i class="icon icon-81"></i>
            </button>

        </div>

        <div style=" padding: 4px 4px 4px 4px; margin-top:44px;">
            <div class="page-bd-15" id="macy">

            </div>
        </div>


        <br>
        <br>
        <div class="weui-footer weui-footer_fixed-bottom">
            <p class="weui-footer__links">
                <a href="/Mobile/Index" class="weui-footer__link">首页</a>
            </p>
            <p class="weui-footer__text">Copyright &copy; HuiJi</p>
        </div>
    </div>

    <!--BEGIN 检索条件-->
    <div id="half" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">筛选条件</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cells weui-cells_radio">
                        <label class="weui-cell weui-check__label" for="x11">
                            <div class="weui-cell__bd">
                                <p>默认排序</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input class="weui-check" name="sort" id="x11" type="radio" checked="checked" value="0">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                        <label class="weui-cell weui-check__label" for="x12">
                            <div class="weui-cell__bd">
                                <p>价格从低到高</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input name="sort" class="weui-check" id="x12" type="radio" value="1">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                        <label class="weui-cell weui-check__label" for="x13">
                            <div class="weui-cell__bd">
                                <p>销量从高到低</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input name="sort" class="weui-check" id="x13" type="radio" value="4">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>

                    @*<div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">number</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" pattern="[0-9]*" placeholder="请输入qq号" type="number">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label">手机号</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="请输入手机号" type="tel">
                        </div>

                    </div>
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd">
                            <label class="weui-label">验证码</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="验证码" type="number">
                        </div>
                        <div class="weui-cell__ft">
                            <button class="weui-vcode-btn" onclick="settime(this)">获取验证码</button>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">date</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" value="" type="date">
                        </div>
                    </div>*@
                    <div class="weui-cell">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" style="width:100%;" id="btn-select-after">确认</a>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!--END 检索条件-->



    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.1/lib/template-web.min.js"></script>
    <script src="~/Scripts/zepto.weui.js"></script>
    @*<script src="~/Scripts/macy.js"></script>*@
    <script src="https://cdn.bootcdn.net/ajax/libs/macy/2.5.1/macy.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <script type="text/html" id="tpl">
        {{each data  val key }}
        <div class="demo" data-id="{{val.Id}}">
            <div style="position:relative;text-align: center;color: #fff;">
                <img src="{{val.PictUrl}}" class="demo-image">
                <div style="position: absolute;
        right: 0px;
        background-color: rgba(255, 0, 0, 0.58);
        z-index: 10;
        top: 4px;
        right: 4px;
        border: 1px dashed;
        border-color: #ffcc00;">
                    <p style=" font-size: 10px; font-weight: 900;">
                        {{if(val.UserType==1)}}
                        天猫领券
                        {{else}}
                        淘宝领券
                        {{/if}}
                    </p>
                    <span style="font-weight: bold;">{{val.CouponAmount}}</span>
                </div>
            </div>




            <div>
                <div>
                    {{if(val.UserType==1)}}
                    <p style="color:white;background-color:red;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">天猫</p>
                    {{else}}
                    <p style="color:white;background-color:#fd4600;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">淘宝</p>
                    {{/if}}
                    {{val.Title}}
                </div>

                <div>
                    <span style="color: #a8a8a8; font-size:0.66rem;">券后</span>
                    <span style="color: #fe3738;">¥</span>
                    <span style="color: #fe3738;font-size: 1.2rem;">{{val.CouponAfterPrice}}</span>
                </div>

                <div style="font-size: .66rem; color: #888; margin-top: .12rem;">
                    <span>{{val.Nick}}</span>
                    <span>| 30日销量{{val.Volume}}</span>
                </div>

            </div>
        </div>
        {{/each}}
    </script>
    <script>
        var masonry = Macy.init({
            container: '#macy',
            trueOrder: false,
            waitForImages: true,
            debug: false,
            margin: {
                x: 10,
                y: 10
            },
            columns: 6,
            breakAt: {
                1200: {
                    columns: 5,
                    margin: {
                        x: 4,
                        y: 4
                    }
                },
                940: {
                    columns: 3,
                    margin: {
                        y: 4
                    }
                },
                520: {
                    columns: 2,
                    margin: {
                        x: 4,
                        y: 4
                    },
                },
                400: {
                    columns: 2,
                    margin: {
                        x: 4,
                        y: 4
                    },
                }
            }
        });

        var pagesize = 15;//每页数据条数
        var page = 1;//当前页码
        var maxpage;//最大页码
        var key = "";
        var loding = false;

        var ordertype = 0;//排序规则

        function ajaxpage(page) {
            loding = true;
            $.showLoading();
            $.ajax({
                type: "POST",
                url: '../Mobile/AjaxNine',
                data: { "page": page, "limit": pagesize, Title: key, OrderType: ordertype},
                dataType: "json",
                beforeSend: function () {
                    $("#more").show();
                },
                success: function (rs) {
                    var html = template('tpl', rs);
                    $("#macy").append(html);
                    maxpage = Math.ceil(rs.count / pagesize);
                    //sessionStorage['maxpage'] = maxpage;
                    //indexsize += rs.data.length;

                    //$(".page-hd-desc").html("最近更新 " + getFDate(rs.data[0].CreateTime));
                    $.hideLoading();

                    masonry.runOnImageLoad(function () {
                        masonry.recalculate(true);
                    }, true);
                    //if (rs.data.length < pagesize) {
                    //    $("#more").html("没有更多数据了");
                    //} else {

                    //}
                    loding = false;
                },
                timeout: 15000
            });
        }

        $("#btn-select-after").click(function () {
            var rdo = document.getElementsByName('sort');
            for (var i = 0; i < rdo.length; i++) {
                if (rdo[i].checked == true) {
                    ordertype = rdo[i].value;//alert(rdo[i].value + '  is selected.');
                    break;
                }
            }
            
            console.log(ordertype);

            $(".close-popup").click();

            $(".btn-search").click();
        });


        $(".btn-search").click(function () {
            key = $("#search").val();
            $("#macy").html("");
            ajaxpage(1);
        });

        $('#search').bind('search', function () {
            key = $("#search").val();
            $("#macy").html("");
            ajaxpage(1);
        });

        var windowTop = 0; //实现 上滑隐藏，下滑显示

        $(".container").scroll(
            function () {
                var scrollTop = $(this).scrollTop();//方法设置或返回被选元素的垂直滚动条位置
                var scrollHeight = $("#macy").scrollHeight();//页面的高
                var windowHeight = $(window).height();//可视窗口高
                console.log(scrollTop + "," + scrollHeight + "," + windowHeight);

                let selBtn = document.querySelector('.weui-search-bar');
                if (scrollTop > windowTop) {
                    selBtn.style.opacity = 0; // 上滑时要做的事（隐藏）
                    windowTop = scrollTop;
                    $(".weui-footer_fixed-bottom").hide();
                } else {
                    selBtn.style.opacity = 1; // 下滑时要做的事（显示）
                    windowTop = scrollTop;
                    $(".weui-footer_fixed-bottom").show();
                }

                if (scrollTop + windowHeight >= scrollHeight && loding == false) {
                    //maxpage = sessionStorage['maxpage'];
                    if (Number(page) < Number(maxpage)) {
                        page++;
                        ajaxpage(page);
                    } else {
                        $("#more").html("没有更多数据了"); return false;
                    }
                }
            });

        const goto = (id) => {
            sessionStorage.setItem('nine_list', $("#macy").html());//存储列表数据
            sessionStorage.setItem('nine_page', page);//存储页码
            sessionStorage.setItem('nine_key', key);//存储key
            sessionStorage.setItem('nine_maxpage', maxpage);//存储maxpage
            sessionStorage.setItem('nine_scroll', $(".container").scrollTop());//存储滚动条位置
            location.href = "GoodsDetails?Id=" + id;
        }

        $(document).on('tap click', ".container .demo", function () {

            id = $(this).data('id');

            goto(id);

        });

        $(function () {

            var l = sessionStorage.getItem('nine_list');

            if (null !== l && '' !== l) {
                $("#macy").html(l);
                $(".container").scrollTop(sessionStorage.getItem('nine_scroll'));
                page = sessionStorage.getItem('nine_page');
                key = sessionStorage.getItem('nine_key');
                maxpage = sessionStorage.getItem('nine_maxpage');

                sessionStorage.removeItem('nine_list');
                sessionStorage.removeItem('nine_page');
                sessionStorage.removeItem('nine_scroll');
                sessionStorage.removeItem('nine_maxpage');


            } else {
                ajaxpage(1);
            }


        });

    </script>
</body>
</html>
